<template>
  <div>
      
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <div class="shuaxin">

          <div v-for="(v) in arr" :key="v.id">
            <p class="shuaxin-p">{{v.con}}</p>
            <div class="shuaxin-img">
                <img :src="v.img1" alt="">
                <img :src="v.img2" alt="">
                <img :src="v.img3" alt="">
            </div>
          </div>

          <div v-for="(v) in arr1" :key="v.id" class="shuaxin-lr">
            <div class="huati-con">
              <p>{{v.con}}</p>
            <span>{{v.title}}</span>
            <span>{{v.time}}</span>
            </div>
            
            <img :src="v.img" alt="">
          </div>
         

       
        </div>
        
      </van-pull-refresh>


      <div class="huatibottom">

      </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      isLoading: false,
      arr:[],
      arr1:[]
    };
  },
  mounted(){
    // console.log(this.$store.state.huatix.arr)
    this.arr = this.$store.state.huatix.arr
    this.arr1 = this.$store.state.huatix.arr1
  },

  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
  },
}
</script>

<style scoped>
.shuaxin{
  height: auto;
  box-sizing: border-box;
  padding: 0 0.15rem;
}
.shuaxin-p{
  width: 100%;
  height: auto;
  margin: 0.1rem auto;
  line-height:0.2rem;
}
.shuaxin-img{
  display: flex;
  justify-content: space-between;
}
.shuaxin img{
  width: 1.08rem;
}
.shuaxin-lr{
  display: flex;
}

.huatibottom{
  height: 0.5rem;
}

.huati-con{
  width: 2.2rem;
}
.huati-con span{
  font-size: 0.12rem;
  color: gray;
}
.huati-con span:nth-of-type(2){
  margin-left: 1.5rem;
}
</style>